<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>

        /* 
           
        雪碧图的使用步骤：
            1.先确定要使用的图标
            2.测量图标的大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为元素的背景图片
            5.设置一个偏移量以显示正确的图片

        雪碧图的特点：
            一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

        注意雪碧图一般使用png格式的图片，那样图片背景透明，不会在页面上显示    
        
        
         */
        a{
            display: inline-block;
            width: 90px;
            height: 27px;
            background-image: url(./img/btn.png);
        }

        a:hover{
            background-position: 186px 0;

        }
    </style>
</head>
<body>
   <a href="#"></a>
</body>
</html>